<template>
	<view class="coupons">
		<view>
			<view class="tab_box">

				<u-tabs activeColor="#FF3333" :list="cate" :bold="true" :is-scroll="false" :current="current"
					@change="change"></u-tabs>

			</view>
			<view style="height: 80rpx;"></view>
			
			<view v-if="total!=0">
				<u-checkbox-group  shape="circle" active-color="#FF3333">
				<view v-for="(item,index) in list" :key="index" class="sign-coupons">
					<view class="info">
						<image src="/static/img/coupons_red.png" v-if="type==1"></image>
						<image src="/static/img/coupons_gray.png" v-else></image>
						<text v-if="item.money>0">￥{{item.money}}</text>
						<text v-if="item.info.satisfy_money>0" class="i_msg">满{{item.info.satisfy_money}}元可用</text>
					</view>
					<view class="flex flex-left-right flex-full name">
						<view class="flex-column">
							<text class="fs-16 bold">{{item.info.name}}</text>
							<text class="fs-12 gray_font" style="margin-top: 20rpx;"
								v-if="item.info.use_timedata==2&&item.info.use_time_info">
								{{item.info.use_time_info.start_time.substring(0,10)}}至{{item.info.use_time_info.end_time.substring(0,10)}}</text>
							<text class="fs-12 gray_font" style="margin-top: 20rpx;"
								v-if="item.info.use_timedata==1&&item.info.use_time_info">

								{{$fomartDate(item.be_time).substring(0,10)}}之前有效
							</text>
						</view>
						<view class="status">
							
							<view v-if="item.cate_id==10">
								<u-checkbox @change="setStatus" :disabled="item.disabled" v-model="item.checked" :name="index"></u-checkbox>
							</view>
							
							<view v-else>
								<text @click="use(item)">立刻使用</text>
							</view>
							
						</view>
					</view>
				</view>
				</u-checkbox-group>
			</view>
			<view class="flex-j-c flex-column align_center" v-else style="padding-top: 10vh;">
				<image :src="none" class="no-bitmap" mode="aspectFit" />
				<text>暂时还没有优惠券哦~</text>
			</view>
		</view>
		<view style="padding-bottom: calc(env(safe-area-inset-bottom) + 98rpx)"></view>
		<view class="my-coupons">
			<view v-if="cate_id==10" @click="morePages">确定</view>
			<view @click="morePage">不使用优惠券</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				cate: [],
				tabList: [{
						name: '未使用',
						id: ''
					},
					{
						name: '已使用',
						id: ''
					},
					{
						name: '已过期',
						id: ''
					},
				],

				page: 1,
				list: [],
				type: 1,
				totalPrice: '',
				total: 0,
				none: '',
				cate_id: '',
				ids:[],
				ci:0
			}
		},

		onLoad(e) {
			this.none = this.$imgUrl + 'assets/img/none_coupon.png';
			this.totalPrice = e.totalPrice;
			//this.getList();
			this.getCate();
		},
		methods: {
			setStatus(e){
				console.log(e);
				var item=this.list[e.name];
				if(e.value){
					
					
					
					
					if(this.ids.length<1){
						this.ci=Math.round(this.totalPrice/item.man);
						
					}
					
					this.ids.push(item.id);
					
					if(this.ci>0&&this.ids.length==this.ci){
						console.log(this.ci,this.ids);
						this.list.forEach(res=>{
							if(!res.checked&&!this.ids.includes(res.id)){
								res.disabled=true;
							}
						});
					}
					
					this.list.forEach(res=>{
						if(res.man==item.man&&res.money==item.money){
							if(this.ci>0&&this.ids.length<this.ci){
								res.disabled=false;
							}
						}else{
							res.disabled=true;
						}
					});
				}else{
					
					this.ids=this.ids.filter(res=>res!=item.id);
					
					this.list.forEach(res=>{
						if(res.man==item.man&&res.money==item.money){
							if(this.ci>0&&this.ids.length<this.ci){
								res.disabled=false;
							}
						}
					});
					
					if(this.ids.length<1){
						console.log(2);
						this.list.forEach(res=>{
							res.disabled=false;
						});
					}
					
					
					
				}
				
				
			},
			change(e) {
				this.current = e;
				this.cate_id = this.cate[e].id;
				this.getList();
			},
			getCate() {
				this.$get(this.$api.couponCate, {
					type: 2
				}, res => {
					let data = res.data;
					if (data.code == 1) {

						/* data.data.unshift({
							id: '',
							name: '全部'
						}); */

						this.cate = data.data;

						if (data.data.length > 0) {
							this.cate_id = data.data[0].id;
							// this.cateCheck=data.data[0].id;
						}
						
						this.getList();

					}
				});
			},
			use(item) {
				console.log(item);
				uni.setStorageSync('quanInfo', item.id);
				this.$back()
			},
            morePages(){
				
				let ids=[];
				this.list.forEach(res=>{
					
					if(res.checked){
						ids.push(res.id);
					}
					
				});
				
				if(ids.length<1) return this.$Toast('请选择');
				
				uni.setStorageSync('quanInfo',ids.join(','));
				this.$back();
			},
			morePage() {
				uni.setStorageSync('quanInfo', -99);
				this.$back()
			},
			getList() {
				let params = {
					page: 1,
					limit: 10,
					type: 1,
					cate_id: this.cate_id,
					order: 1,
					totalPrice:this.totalPrice
				};
				this.$get(this.$api.cMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						
					

						this.list = data.data.data;
						this.total = data.data.total;
					}
				})
			}
		},

		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;

				let params = {
					page: this.page,
					limit: 10,
					cate_id: this.cate_id,
					type: 1,
					order: 1
				};


				this.$get(this.$api.cMy, params, res => {
					let data = res.data;
					data.data.data.forEach(ress => {
						this.list.push(ress);
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 28rpx !important;
	}

	.coupons {
		.tabs {
			background: white;
			padding: 0 30rpx;
			height: 80rpx;
			position: relative;

			.sign {
				display: flex;
				justify-content: space-between;
				line-height: 80rpx;
			}
		}

		.move-border {
			top: 72rpx;
			position: absolute;
			width: 40rpx;
			background: #FF3333;
			height: 4px;
			transition: 1s;
			border-radius: 3rpx;

		}

		.no-bitmap {
			width: 377rpx;
		}

		.my-coupons {

			position: fixed;

			z-index: 9;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: white;
			height: 98rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 690rpx;
				background: #FF3333;
				border-radius: 35rpx;
				color: white;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}

	.coupons .sign-coupons {
		margin: 30rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 10rpx 4rpx 4rpx 4rpx;
		display: flex;

		.info {
			width: 204rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 204rpx;
				height: 200rpx;
				position: absolute;
			}

			.i_msg {
				font-size: 24rpx;
				margin-top: 10rpx;
			}

			text {
				position: relative;
				z-index: 4;
				font-size: 40rpx;
				color: white;
			}
		}

		.name {
			padding: 0 30rpx;
		}

		.status {
			text {
				display: inline-block;
				width: 120rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				color: white;
				border-radius: 20rpx;
				background: linear-gradient(to left, #FF7A7A, #FF3333);
				font-size: 22rpx;
			}

			.no-use {
				background: #999;
			}
		}
	}
</style>